<template >
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item>
        <img src="http://127.0.0.1:3000/flower_info/lb1.jpg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="http://127.0.0.1:3000/flower_info/lb2.jpg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="http://127.0.0.1:3000/flower_info/lb3.jpg" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="http://127.0.0.1:3000/flower_info/lb4.jpg" />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
    />
    <!-- 图片四格展示 -->
    <van-grid>
      <van-grid-item icon="send-gift-o" text="商务开业" @click="gosw"/>
      <van-grid-item icon="like-o" text="表白求婚" @click="gobb"/>
      <van-grid-item icon="birthday-cake-o" text="生日祝福" @click="gosr"/>
      <van-grid-item icon="fire-o" text="排行榜" @click="goph"/>
    </van-grid>
    <!-- 使用组件传参 -->
    <span class="ti"></span>
    <flower-details v-for="i in lpic" :key="i.lid" :details="i">
    </flower-details>
    <!-- 页面底部的菜单栏 -->
    <tabbar class="footer"></tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import FlowerDetails from "../components/common/FlowerDetails.vue";
import Tabbar from "../components/common/Tabbar.vue";
export default {
  // name: "Home",
  props: ["value"],
  components: { Tabbar, FlowerDetails },
  computed: { ...mapState(["baseURL"]) },
  data() {
    return {
      data: [],
      lpic: [],
    };
  },
  mounted() {
    this.getData();
    this.getPic();
  },
  methods: {
    // 获取顶部的轮播图图片
    getData() {
      // http://127.0.0.1:3000/v1/flower/infolist
      const url = this.baseURL + "product/infolbt";
      this.axios.get(url).then((res) => {
        console.log("轮播图输出:", res);
        this.data = res.data;
      });
    },
    // 获取首页底部加载的图片
    getPic() {
      // const url="http://127.0.0.1:3000/product/listpic";
      const url = this.baseURL + "product/listpic";
      console.log("图片的地址:", url);
      this.axios.get(url).then((res) => {
        console.log("获取需要加载的图片:", res.data);
        this.lpic = res.data;
      });
    },
    gosw(){
      this.$router.push('/list');
    },
    gobb(){
      this.$router.push('/list');
    },
    gosr(){
      this.$router.push('/list');
    },
    goph  (){
      this.$router.push('/list');
    }
  },
};
</script>
<style  lang="scss" scoped>
.home {
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 48vw;
    text-align: center;
    /* background-color: #39a9ed; */
    img {
      height: 200px;
      width: 100%;
      height: 100%;
    }
  }
  // 样式穿透
  ::v-deep .van-grid-item__content {
    background-image: linear-gradient(to bottom, #e0fff5, #ededff);
  }
  .ti {
    &::before {
      content: "鲜花严选";
      display: block;
      width: 100%;
      height: 8vh;
      line-height: 8vh;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      background-image: linear-gradient(to right, #e0fff5, #ededff);
    }
  }
  .footer {
    /* display: flex; */
    position: fixed;
    bottom: 0vh;
    // height: 100%;
  }
}
</style>